<!--
 * @Description: 老师盒子d，有图
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-07 16:09:00
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-17 16:44:10
-->
<template>
    <div class="teacher-box">
        <div class="top">
            <el-avatar class="avatarSazi" :size="avatarSazi" :src="IMG_URL+data.img"></el-avatar>
            <div class="right">
                <div class="name">{{ data.name }}</div>
                <div class="s">{{ data.title }}</div>
            </div>
        </div>
        <div class="info-box">
            {{data.des}}
        </div>
    </div>
</template>
<script>
import clientWidth from "~/mixin/clientWidth";
export default {
    mixins: [clientWidth],
    props: {
        data: {
            type: Object,
            default: () => {
                return {}
            },
            // img: "",
            // name: "",
            // info: "",
            // infos:''
        },
    },
    computed:{
        // 头像的大小
        avatarSazi(){
            return this.clientWidth > 768 ? 50 : 40
        }
    }
};
</script>

<style lang="scss" scoped>
.teacher-box {
    background-color: #2d3037;
    border-radius: 10px;
    overflow: hidden;
    padding: 40px 30px;
    display: block;
    .top {
        display: flex;
        .right {
            padding-left:18px ;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .name {
                font-size: 24px;
                color: #ffffff;
                @include line-over
            }
            .s {
                font-size: 16px;
                color: #999999;
                margin-top: 6px;
                @include line-over
            }
        }
    }
    .info-box{
        font-size: 16px;
        color: #999999;
        line-height: 1.5;
        margin-top: 30px;
        min-height: 72px;
        @include line-over(3)
    }
}

@media screen and (max-width: 760px) {
    .teacher-box{
       padding: 10px;
       margin-bottom: 10px;
       .info-box{
            margin-top: 10px;
            font-size: 14px;
            min-height: 65px;
       }
       .top {
           .right{
               .name{
                    font-size: 20px; 
               }
               .s{
                    font-size: 14px;
               }
           }
       }
    }
}
</style>